<template>
  <el-card class="box-card">

    <!-- 头部区域 -->
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="search" class="form">
        <div class="left">
          <el-form-item label="目录名称" class="directory">
            <el-input
              v-model="search.name"
              size="small"
              placeholder="根据文章标题搜索"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="search.state" size="small">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="resetForm()">清除</el-button>
            <el-button
              size="small"
              type="primary"
              @click="searchBtn(search.name, search.state)"
              >搜索</el-button
            >
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item class="adddir">
            <el-button
              size="small"
              icon="el-icon-edit"
              type="success"
              @click="dialogFormVisible = true"
              >新增目录</el-button
            >
          </el-form-item>
        </div>
      </el-form>
      <el-alert
        type="info"
        :closable="false"
        show-icon
        :title="`数据一共 ${counts} 条`"
      >
      </el-alert>
    </div>

    <!-- 表格区域 -->
    <el-table :data="tableData" style="width: 800" ref="list">
      <el-table-column
        type="index"
        :index="indexMethod"
        label="序号"
        width="80"
      ></el-table-column>
      <el-table-column label="文章标题" width="400">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span
          ><el-link
            type="primary"
            icon="el-icon-film"
            :underline="false"
            class="linkIcon"
            v-if="scope.row.videoURL"
            @click="showTheMaskLayer(scope.row.videoURL)"
          ></el-link>
        </template>
      </el-table-column>
      <el-table-column prop="visits" label="阅读数"> </el-table-column>
      <el-table-column prop="username" label="录入人"> </el-table-column>
      <el-table-column label="录入时间">
        <template slot-scope="scope">
          <div>
            {{ parseTime(new Date(scope.row.createTime)) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <div>{{ scope.row.state === 1 ? "已启用" : "已禁用" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <div>
            <el-button type="text" @click="previewArticleClickFn(scope.row.id)">
              预览
            </el-button>
            <el-button
              type="text"
              @click="editStateFn(scope.row.id, scope.row.state)"
            >
              {{ scope.row.state ? "禁用" : "启用" }}
            </el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="modifyArticlesClickFn(scope.row.id)"
            >
              修改
            </el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="deleteClickFn(scope.row)"
            >
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      background
      :page-size="10"
      layout=" prev, pager, next, sizes, jumper"
      :page-sizes="[5, 10, 20, 50]"
      :total="counts"
      @size-change="ChangeSize"
      @current-change="ChangeCurrent"
      :hide-on-single-page="true"
    >
    </el-pagination>

    <!-- 新增文章 -->
    <el-dialog
      title="新增文章"
      :visible.sync="dialogFormVisible"
      class="dirbox"
    >
      <TextEditor ref="TextEditorText" v-if="dialogFormVisible"></TextEditor>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleClickFn"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改文章 -->
    <el-dialog title="修改文章" :visible.sync="modifyArticles" class="dirbox">
      <TextEditor
        ref="TextEditorText"
        v-if="modifyArticles"
        :Obj="modifyArticlesObj"
      ></TextEditor>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyArticles = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleClickFn"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 预览文章 -->
    <el-dialog title="预览文章" :visible.sync="previewArticle">
      <div>
        <h2>{{ previewArticletext.title }}</h2>
        <div class="title">
          <span>{{ parseTime(new Date(previewArticletext.createTime)) }}</span>
          <i class="el-icon-view"></i>
          <span>{{ previewArticletext.visits }}</span>
        </div>
        <div class="content">
          <p v-html="previewArticletext.articleBody"></p>
        </div>
      </div>
    </el-dialog>

    <!-- 显示视频 -->
    <div class="mask" v-if="videoShow">
      <div class="close" @click="videoShow = false">
        <i class="el-icon-close"></i>
      </div>
      <div class="box">
        <video :src="videoAddress" width="800" height="600" controls autoplay></video>
      </div>
    </div>

  </el-card>
</template>

<script>
import { list, changeState, add, update, remove } from '@/api/hmmm/articles.js'
import { parseTime } from '@/utils'
import TextEditor from '../components/TextEditor.vue'
export default {
  name: '',
  components: {
    TextEditor
  },
  data () {
    return {
      search: {
        name: null, // 目录名称
        state: null // 状态
      },
      options: [
        { value: '1', label: '已启用' },
        { value: '0', label: '已禁用' }
      ],
      tableData: [],
      counts: 0,
      page: null,
      pagesize: 10,
      data: {
        id: '',
        state: 0
      },
      dialogFormVisible: false,
      previewArticle: false,
      modifyArticles: false,
      previewArticletext: {},
      modifyArticlesObj: {},
      videoAddress: '',
      videoShow: false
    }
  },
  created () {
    this.getdata(this.page, this.pagesize, this.search.name, this.search.state)
  },
  methods: {
    parseTime: parseTime,
    async getdata (page, pagesize, name, state) {
      const { data } = await list({
        page,
        pagesize,
        keyword: name,
        state
      })
      this.counts = data.counts
      this.tableData = data.items
    },
    indexMethod (index) {
      return index + 1
    },
    searchBtn (value, state) {
      this.search.name = value
      this.search.state = state
      if (value === '' && state === null) {
        return this.getdata()
      } else if (value === '' || state === null) {
        return this.getdata(
          this.page,
          this.pagesize,
          this.search.name,
          this.search.state
        )
      } else {
        return this.getdata(
          this.page,
          this.pagesize,
          this.search.name,
          this.search.state
        )
      }
    },
    // 切换启用
    async editStateFn (id, state) {
      this.data.id = id
      if (state === 0) {
        await changeState({
          id,
          state: 1
        })
        const res = this.$refs.list.data.filter(item => item.id === id)
        res[0].state = 1
      } else {
        await changeState({
          id,
          state: 0
        })
        const res = this.$refs.list.data.filter(item => item.id === id)
        res[0].state = 0
      }
      // await changeState(this.data)
      // this.searchBtn(this.search.name, this.search.state)
    },
    resetForm () {
      this.search.name = null
      this.search.state = null
    },
    ChangeSize (val) {
      this.pagesize = val
      this.getdata(
        this.page,
        this.pagesize,
        this.search.name,
        this.search.state
      )
    },
    ChangeCurrent (val) {
      this.page = val
      this.getdata(
        this.page,
        this.pagesize,
        this.search.name,
        this.search.state
      )
    },
    previewArticleClickFn (id) {
      this.previewArticle = true
      this.previewArticletext = this.tableData.filter(
        (item) => item.id === id
      )[0]
    },
    async dialogFormVisibleClickFn () {
      const Editor = this.$refs.TextEditorText
      if (Editor.form.title === '' && Editor.form.articleBody === '') {
        Editor.inputdep1 = true
        Editor.inputdep2 = true
        return
      } else if (Editor.form.title === '') {
        Editor.inputdep1 = true
        return
      } else if (Editor.form.articleBody === '') {
        Editor.inputdep2 = true
        return
      } else {
        Editor.inputdep1 = false
        Editor.inputdep2 = false
      }
      this.modifyArticles = false
      this.dialogFormVisible = false
      const form = this.$refs.TextEditorText.form
      console.log(form)
      if (this.$refs.TextEditorText.Obj) {
        await update(form)
      } else {
        await add({
          title: form.title,
          articleBody: form.articleBody,
          videoURL: form.videoURL
        })
      }
      this.$message({
        type: 'success',
        message: '操作成功'
      })
      this.resetForm()
      this.getdata(
        this.page,
        this.pagesize,
        this.search.name,
        this.search.state
      )
    },
    modifyArticlesClickFn (id) {
      this.modifyArticles = true
      this.modifyArticlesObj = this.tableData.filter(
        (item) => item.id === id
      )[0]
    },
    async deleteClickFn (obj) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(obj)
        this.tableData = this.tableData.filter((item) => item.id !== obj.id)
        const { data } = await list({
          pagesize: 1
        })
        this.counts = data.counts
        this.tableData = [...this.tableData, ...data.items]
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    },
    showTheMaskLayer (videolink) {
      this.videoAddress = videolink
      this.videoShow = true
    }
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  margin: 10px;
  padding-left: 0;
  padding-right: 0;
  ::v-deep .el-card__header {
    border-bottom: none;
    padding-bottom: 0;
  }
  .el-alert {
    margin-top: -6px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
  .form {
    display: flex;
    justify-content: space-between;
    .left {
      padding-left: 10px;
    }
    .directory {
      margin-right: 50px;
    }
    .adddir {
      margin-right: 0;
    }
  }
  .pages {
    float: right;
  }
  .dialog-footer {
    display: flex;
    justify-content: end;
  }
  ::v-deep .el-dialog__body {
    padding-bottom: 0px;
  }
  .el-pagination {
    width: 100%;
    float: right;
    margin: 22px;
    display: flex;
    justify-content: flex-end;
  }
  .title {
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
    i {
      margin-left: 20px;
    }
    span {
      margin-left: 10px;
    }
  }
  .content {
    background: #f5f5f5;
    padding: 10px;
    p {
      margin: 14px 0;
    }
  }
  h2 {
    margin: 0;
  }
  ::v-deep .el-dialog__body {
    padding-bottom: 40px;
  }
}
.linkIcon {
  margin-left: 5px;
  font-size: 18px;
}
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: flex;
  justify-content: center;
  padding: 100px;
  overflow-y: hidden;
  .close {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%);
    background: rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    z-index: 99;
}
.box {
  width: 800px;
  height: 600px;
  margin-top: 0px;
}
}
</style>
